<template>
  <div class="abnormal-collection">
    <div class="abnormal-collection__items">
      <div class="radio-item">
        <div class="title">是否收款异常</div>
        <el-radio-group v-model="filterListData[0].value[0]">
          <el-radio v-for="item in filterListData[0].option.data" :value="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </div>
      <div class="input-item">
        <div class="title">异常金额大于</div>
        <div class="input-item__option">
          <el-input type="number" :min="0" v-model="filterListData[1].value[0]" @input="handleInput($event,1)" />
        </div>
      </div>
      <div class="input-item overdue">
        <div class="title">逾期天数大于</div>
        <div class="input-item__option">
          <el-input type="number" :min="0" v-model="filterListData[2].value[0]" @input="handleInput($event,2)" />
        </div>
      </div>
    </div>
    <div class="abnormal-collection__buttons">
      <el-button type="primary" class="buttons-cancel" link size="default" @click="handelReset">重置</el-button>
      <el-button type="primary" class="buttons-confirm" size="default" @click="handelConfirm">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  filterList: {
    type: Array,
    default: () => [
      {
        title: "收款异常",
        filterId: "receive_exp",
        condition: [
          {
            label: "等于",
            value: "eq"
          }
        ],
        option: {
          type: "InputSelect",
          lazy: false,
          dataSource: {},
          data: [
            {
              label: "是",
              value: true
            },
            {
              label: "否",
              value: false
            }
          ]
        },
        compare: "eq",
        value: [""]
      },
      {
        title: "异常金额",
        filterId: "receive_exp_amount",
        condition: [
          {
            label: "大于",
            value: "gt"
          }
        ],
        option: {
          type: "SelectInput",
          lazy: false,
          dataSource: {},
          data: []
        },
        compare: "gt",
        value: [""]
      },
      {
        title: "预期天数",
        filterId: "receive_exp_days",
        condition: [
          {
            label: "大于",
            value: "gt"
          }
        ],
        option: {
          type: "SelectInput",
          lazy: false,
          dataSource: {},
          data: []
        },
        compare: "gt",
        value: [""]
      }
    ]
  }
});
const emit = defineEmits(["handelFilterData"]);
const filterListData = ref([]);

watch(
  () => props.filterList,
  newVal => {
    filterListData.value = [...newVal];
  },
  { deep: true, immediate: true }
);

const handleInput = (value,index) => {
  const validValue = Number(value)
  if (/^\d+$/.test(value)) {
    filterListData.value[index].value[0] = validValue; // 更新输入框值
  } else {
    filterListData.value[index].value[0] = '';
  }
};

const handelReset = () => {
  filterListData.value[0].value = [""];
  filterListData.value[1].value = [""];
  filterListData.value[2].value = [""];
  emit("handelFilterData", filterListData.value);
};
const handelConfirm = () => {
  emit("handelFilterData", filterListData.value);
};
</script>

<style scoped lang="scss">
@import "abnormalCollection";
</style>
